import React, {Component} from 'react';
import {connect} from "react-redux"
import {subNumber} from "../store/modules/counter";
import axios from "axios";
import store from "../store";
import {changeBanners, fetchBannerList} from "../store/modules/home";
class Home extends Component {

    componentDidMount() {
        // axios.get("http://123.207.32.32:8000/home/multidata").then(res=>{
        //     let banners = res.data.data.banner.list
        //     store.dispatch(changeBanners(banners))
        // })
        store.dispatch(fetchBannerList("hehe"))
    }


    subNumber(num){
        // dispatchEvent()
        this.props.subNumber(num)
    }
    render() {
        const {counter,bannerList} = this.props
        return (
            <div>
                home

                <h2>counter :{counter} </h2>

                <button onClick={()=>this.subNumber(5)}>-5</button>
                <button onClick={()=>this.subNumber(10)}>-10</button>


                <h3>展示</h3>
                <ul>
                    {
                        bannerList.map((item,index)=>{
                            return <li key={index}>{item.title}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state)=>({
    counter:state.counter.counter,
    bannerList:state.home.bannerList
})


const mapDispatchToProps= (dispatch)=>({
    subNumber(num){
        // 触发action
        dispatch(subNumber(num))
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Home);
